<template>
    <div>
        <el-card style="margin-bottom:20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item >志愿者</el-breadcrumb-item>
          <el-breadcrumb-item >志愿者管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="20">
          <el-col :span="8">
              <el-input placeholder="请输入id"
              v-model="id">
                  <el-button slot="append" class="el-icon-search"
                  @click="getList"></el-button>
              </el-input>
          </el-col>
          <el-col :span="8">
              <el-button type="primary" class="btn" @click="addFormVisible = true">添加志愿者</el-button>
          </el-col>
        </el-row>
        </el-card>
        <el-card>
            <el-table :data="tableData">
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="招娉标题" prop="title"></el-table-column>
            <el-table-column label="职位" prop="position" show-overflow-tooltip ></el-table-column>
            <el-table-column label="图片" prop="picture">
                <template slot-scope="scope">
                    <img :src="scope.row.picture" width="100px">
                </template>
            </el-table-column>
            <el-table-column label="招娉要求" prop="workRequire"></el-table-column>
            <el-table-column label="工资待遇" prop="workSalary"></el-table-column>
            <el-table-column label="工作地点" prop="workPlace"></el-table-column>
            <el-table-column label="工作时间" prop="workTime"></el-table-column>
            <el-table-column label="招聘人数" prop="recruitsNum"></el-table-column>
            <el-table-column label="负责人" prop="lead"></el-table-column>
            <el-table-column label="联系方式" prop="contact"></el-table-column>
            <el-table-column label="发布日期" prop="releaseDate"></el-table-column>
            <el-table-column label="最近点击时间" prop="lastClickTime"></el-table-column>
            <el-table-column label="点击次数" prop="clickNum"></el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div>
                <el-pagination
                :total="total"   
                layout="prev,pager,next"
                :page-size="pageSize"
                @current-change="change">
                <!--  @current-change="change" 
                        当前页发生改变时触发event事件change
                -->
                </el-pagination>
            </div>
        </el-card>
        <!-- 添加志愿者 -->
        <el-dialog title="添加志愿者" :visible.sync="addFormVisible"
        width="40%">
            <el-form :model="addForm">
              <el-form-item label="id">
                <el-input v-model="addForm.id" ></el-input>
              </el-form-item>
              <el-form-item label="招聘标题">
                <el-input v-model="addForm.title" ></el-input>
              </el-form-item>
              <el-form-item label="职位">
                <el-input v-model="addForm.position" ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload 
                class="upload-demo" 
                action="action"
                accept="image/jpeg,image/png,image/jpg"
                :limit="1" 
                :auto-upload="true"
                :http-request="uploadFile"
                ref="upload"
                multiple>
                <!-- :http-request="upload" :http-request="uploadFile"-->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip">只能上传图片</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="招聘要求" >
                <el-input v-model="addForm.workRequire"></el-input>
              </el-form-item>
              <el-form-item label="工资待遇" >
                <el-input v-model="addForm.workSalary"></el-input>
              </el-form-item>
              <el-form-item label="工作地点" >
                <el-input v-model="addForm.workPlace"></el-input>
              </el-form-item>
              <el-form-item label="工作时间" >
                <el-input v-model="addForm.workTime"></el-input>
              </el-form-item>
              <el-form-item label="招聘人数" >
                <el-input v-model="addForm.recruitsNum"></el-input>
              </el-form-item>
              <el-form-item label="负责人" >
                <el-input v-model="addForm.lead"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input v-model="addForm.contact" ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addVolunteer()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改志愿者 -->
        <el-dialog title="修改志愿者" :visible.sync="updateFormVisible"
        width="40%">
            <el-form :model="updateForm">
              <el-form-item label="id">
                <el-input v-model="updateForm.id" ></el-input>
              </el-form-item>
              <el-form-item label="招聘标题">
                <el-input v-model="updateForm.title" ></el-input>
              </el-form-item>
              <el-form-item label="职位">
                <el-input v-model="updateForm.position" ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload 
                class="upload-demo" 
                action="action"
                accept="image/jpeg,image/png,image/jpg"
                :limit="1" 
                :auto-upload="true"
                :http-request="uploadFile"
                ref="upload"
                multiple>
                <!-- :http-request="upload" :http-request="uploadFile"-->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip">只能上传图片</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="招聘要求" >
                <el-input v-model="updateForm.workRequire"></el-input>
              </el-form-item>
              <el-form-item label="工资待遇" >
                <el-input v-model="updateForm.workSalary"></el-input>
              </el-form-item>
              <el-form-item label="工作地点" >
                <el-input v-model="updateForm.workPlace"></el-input>
              </el-form-item>
              <el-form-item label="工作时间" >
                <el-input v-model="updateForm.workTime"></el-input>
              </el-form-item>
              <el-form-item label="招聘人数" >
                <el-input v-model="updateForm.recruitsNum"></el-input>
              </el-form-item>
              <el-form-item label="负责人" >
                <el-input v-model="updateForm.lead"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input v-model="updateForm.contact" ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="updateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateVolunteer()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tableData:[],
            pageNum:1,
            pageSize:3,
            id:'',
            total:null,
            addForm:{},
            updateForm:{},
            addFormVisible:false,
            updateFormVisible:false,
        }
    },
    methods:{
        async getList(){
            let {data:res} = await this.$axios.get('volunteer/getlist',{
                params:{
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    id:this.id
                }
            })
            window.console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;

        },
        change(e){
            // e是当前页数
            window.console.log(e);
            this.pageNum = e;
            this.getList(e,this.pageSize);
        },
        async addVolunteer(){
            // console.log(JSON.stringify(this.addForm));
            this.addForm.picture = this.nowImg
            let { data:res } = await this.$axios.post("/volunteer/add",JSON.stringify(this.addForm),{
                headers:{
                    "content-type":"application/json"
                }
            });
            if (res.code != 200) return this.$message.error(res.message);
            this.$message.success(res.code);
            this.addFormVisible = false;
            this.getList(this.pageNum, this.pageSize);
            console.log(JSON.stringify(this.addForm));
        },
        async uploadFile() {
        const formData = new FormData();
        const file = this.$refs.upload.uploadFiles[0];
        const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
        if (!file) { // 若未选择文件
          alert('请选择文件');
          return;
        }
        window.console.log('图片解析为：  '+file.raw)
        formData.append('file', file.raw);
        formData.append('type', 'YONGHU');
        let {data: res} =  await this.$axios.post('/uploadImg', formData, headerConfig)
        window.console.log(res)
        this.nowImg = res.data.imgurl
    },
        async del(id){
            let { data : res } = await this.$axios.get("/volunteer/delete",{
                params: {
                id: id,
                }
            });
            if(res.code != 200) return this.$message.error(res.code);
            this.$message.success(res.code);
            console.log(res);
            this.getList(this.pageNum,this.pageSize);
        },
        update(row){
            this.updateForm = row
            this.updateFormVisible = true;
        },
        async updateVolunteer(){
            let{ data : res  } = await this.$axios.post("/volunteer/update",this.updateForm)
            if (res.code != 200) return this.$message.error(res.message);
            this.$message.success(res.code);
            this.updateFormVisible = false;
        }
        
    },
    created(){
        this.getList(this.pageNum,this.pageSize)
    }
}
</script>


<style>
.el-input{
    padding: 20px;
}
.btn{
    margin: 20px 0px 0px 20px !important;
}
</style>